Skip to content

Changing XHR to Fetch API#1845

Open
hmdros wants to merge 1 commit intofreeCodeCamp:mainfrom
hmdros:replace-xhr-with-fetch
Open

Changing XHR to Fetch API#1845
hmdros wants to merge 1 commit intofreeCodeCamp:mainfrom
hmdros:replace-xhr-with-fetch

Conversation

@hmdros
Copy link

@hmdros hmdros commented Oct 19, 2022

@arielj, @toppa and I are submitting this PR for this issue: #1193

We had a few differences between XHR and Fetch, so we couldn't match functionality 100%.
But we think it's fine from what we saw on the code.

  • Now we abort the request with AbortController
  • Fetch API doesn't have a onProgress callback or equivalent
  • Fetch API doesn't support sync request

We couldn't find usages of the xhr argument on callback methods. We weren't sure about the arguments.

Captura de Tela 2022-10-19 às 17 56 42

@hmdros hmdros requested a review from a team as a code owner October 19, 2022 20:57
simon04
simon04 requested changes Oct 19, 2022
View reviewed changes
Copy link
Contributor

@simon04 simon04 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your work. I appreciate the modernisation. For this core functionality, we should take extra care to maintain compatibility and not introduce any bugs. Please see my comments.

assets/javascripts/lib/ajax.coffee
Comment on lines +85 to +86
onError = (type, error, options) ->
options.error?.call options.context, type, error, options
Copy link
Contributor

@simon04 simon04 Oct 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here are some usages for the error handler and progress callback:

assets/javascripts/lib/ajax.coffee
Comment on lines -105 to -109
abort = (xhr) ->
clearTimeout(xhr.timer)
xhr.onreadystatechange = null
xhr.abort()
return
Copy link
Contributor

@simon04 simon04 Oct 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's one usage of abort:

assets/javascripts/lib/ajax.coffee
Comment on lines +22 to +25
if options.dataType == 'json'
response.json()
else
response.text()
Copy link
Contributor

@simon04 simon04 Oct 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think response.ok and response.status (200 <= xhr.status < 300) need to be checked.

@arielj
Copy link

arielj commented Oct 24, 2022

hey @simon04 we were reviewing your comments and the code, and we have some concerns if this move from xhr to fetch is actually beneficial or not. I can describe a bit of what we found:

  • fetch has no equivalent of a progress callback, the workarounds involve adding a lot of code wrapping the fetch requests into another object like https://dev.to/tqbit/how-to-monitor-the-progress-of-a-javascript-fetch-request-and-cancel-it-on-demand-107f or https://github.com/prioe/node-fetch-progress, but we are not sure if that's the direction you want to go with this code, it will be way more complex
  • the way the abort works with fetch requests requires a lot of changes in logic because fetch does not return a request object that can be aborted, it returns a promise, so the abort callback would have to be passed as an option from the caller (it requires changing entry_page.coffee, entry.coffee, db.coffee, and ajax.coffee just to pass around an abort function)

Also, we noticed one thing that seems to be a bug in the current code, this error callback

devdocs/assets/javascripts/app/update_checker.coffee

Line 17 in 14049da

error: (_, xhr) => @onUpdateReady() if xhr.status is 404
is expecting the xhr as the second argument, but that's actually passed as the third argument here

devdocs/assets/javascripts/lib/ajax.coffee

Line 97 in 14049da

options.error?.call options.context, type, xhr, options

We want to raise these concerns before continuing with this change, we are not sure if it's really worth it (the current code works just fine and some of the code around it was designed for how xhr works)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@simon04 simon04 simon04 requested changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@hmdros @arielj @simon04